<template>
  <div class="curriculums">
    <VTit :color="['#ae9005', '#ecc50f', '#fff']">今日课表</VTit>
    <div class="c-cs">
      <ul class="list cf">
        <li v-for="(item, i, key) in today" :key="key" class="item">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
// import FontZoom from '@/modules/font-zoom/FontZoom'
import VTit from '@/components/comm/VTit.vue'
export default {
  name: 'Curriculums',
  components: {
    VTit
  },
  props: {
    curriculums: {
      type: Object,
      default () { return {} }
    }
  },
  data () {
    return {
      currIndex: 0,
      showType: 0
    }
  },
  computed: {
    today () {
      return this.strToArr(this.curriculums.today)
    },
    tomorrow () {
      return this.strToArr(this.curriculums.tomorrow)
    }
    // culums () {
    //   let { currIndex, today, tomorrow } = this
    //   return currIndex === 0 ? today : tomorrow
    // }
  },
  created () {
    setInterval(() => {
      this.currIndex = -(this.currIndex - 1)
    }, 10 * 1000)
  },
  methods: {
    strToArr (str) {
      if (str) return str.replace(/\s*^,/, '').split(',')
      return []
    }
  }
}
</script>

<style scoped>
.curriculums {
  /*课程表*/
  width: 320px;
  height: 220px;
  float: left;
  font-size: 24px;
  color: #333;
  /* padding-left: 62px; */
}
.head {
  margin-left: -20px;
  /* width: 220px;
  height: 42px; */
  /* border-radius: 8px; */
  /* overflow: hidden; */
  /* background-color: #33c5e8;
  position: relative; */
}
.head::before {
  content: '';
  position: absolute;;
  top: -4px;
  left: -4px;
  height: 50px;
  width: 8px;
  background-color: #33a8c1;
  border-radius: 100px;
}
.head::after {
  content: '';
  position:absolute;
  top: 0;
  /* right: 0; */
  left: 100%;
  height: 50px;
  width: 20px;
  background: #fff;
  transform: rotate(15deg);
  transform-origin: top;

}
.head > .text {
  text-align: center;
  /* width: 50%; */
  /* float: left; */
  color: #999;
  /* box-sizing: border-box; */
}
.head > .text.active {
  background: #41cbec;
  color: #fff;
}
.head > .text:first-child {
  border-right: 1px solid #ccc;
}
.c-cs {
  display: block;
  /* width: 150px; */
  /* float: left; */
}

.c-cs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 20px;
}

.c-cs li {
  text-align: center;
  line-height: 35px;
  color: #666;
}

.c-cs .list {
  /* margin-left: -21px; */
}
.list .item {
  float: left;
  margin: 55px 10px 0;
  line-height: 38px;
}
</style>
